<template>
  <div style="width: 1052px;">
    <el-dialog
        title="资料下载"
        :visible.sync="dialogVisible"
        width="50%"
    >
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="file.fileName"
            label="文件名称"
            width="270">
        </el-table-column>
        <el-table-column
            label="大小"
            width="270">
          <template slot-scope="scope">
            {{ getSize(scope.row.file) }}
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="270">
          <template slot-scope="scope">
            <a v-if="isLogin()" class="el-button" :href="getSrc(scope.row)" download="scope.row.file.fileName">下载</a>
            <el-button v-if="!isLogin()" @click="$message.info('未登录无法下载')"> 下载</el-button>
          </template>

          <!--          <el-button :disabled="btnStatus" @click="toThingsDownLoad(file.id)"></el-button>-->
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <span class="header"><i class="el-icon-collection"></i> 图书详情>></span>
    <div class="deta-tou">
      <div class="fleft deta-t-fl" style="    margin-top: 15px;">
        <div id="home_slider" class="flexslider">
          <ul class="slides">
            <li>
              <div class="slide">
                <a href="" target="_blank"><img class="img" :src="this.$store.state.baseImgUrl+info.img"
                                                alt="中华经典素读范本-彩色典藏盒装版-6册含1光盘"></a>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="fright deta-t-fr">
        <form action="javascript:addToCart(532)" method="post" name="ECS_FORMBUY" id="ECS_FORMBUY">
          <span class="name">{{ info.name }}<i class="co-l">
          </i></span>
          <el-button class="btn btn3" type="success" style="" @click="collection(info.id)" v-if="starVisible"><i class="el-icon-star-off"></i><br>收藏</el-button>
          <el-button class="btn btn3" type="success" style="" @click="cancleCollection(info.id)" v-if="!starVisible"><i class="el-icon-star-on"></i><br>取消收藏</el-button>
          <div class="dd1">
          </div>
          <div class="dd2">
            <span class="author"> {{info.author}} 主编</span>
            <span class="fleft d-sn totalC">共{{ total }}条商品评论</span>

          </div>
          <div class="dd3">
            <div class="dd3-div">
            </div>
            <div style="margin-bottom: 8px;">
              <span  style="font-size:14px;" class="co-l contents">商品单价：￥ {{ info.price |rounding}} 元</span><br>
            </div>
            <!--            <strong style="font-size:14px;" class="co-l">商品总价：<input type="text" v-model="info.price"></strong>￥<p id="ECS_GOODS_AMOUNT" class="shop" style="color:#b50029;">{{info.price}}元</p>-->
            <strong style="font-size:14px;" class="co-l contents">商品总价：￥ <span style="color:#b50029">{{
                totalPrice.toFixed(2)
              }} </span>元</strong><br>
            <div style="clear:both;"></div>
            <div class="contents c1" style="height:28px;margin-top:8px;">
              <p style="float:left;font-size:14px; line-height:28px;" class="co-l c2">购买数量：&nbsp;&nbsp;</p>
              <el-input-number v-model="payNum" :min="1" :max="info.count" label="购买数量"></el-input-number>
            </div><br>
            <div style="height:28px;margin-top:8px;">
              <p style="float:left;font-size:14px; line-height:28px;" class="co-l contents">库存数量&nbsp;:&nbsp;&nbsp;</p>
              <div style="float:left;line-height:28px;">
                {{ info.count }}
              </div>
            </div>
          </div>
          <div class="dd4">
            <div class="d-jr-m">
              <el-row>
                <el-button class="btn btn1" style="" @click="addCart"><i class="el-icon-shopping-cart-2"></i>添加购物车</el-button>
                <el-button class="btn btn2" style="" @click="toPay"><i class="el-icon-coin"></i>直接购买</el-button>
                <el-button v-if="this.audiosFile!=''" class="btn btn4" style="" @click="toMucis"><i class="el-icon-headset"></i><br>在线音频</el-button>
                <el-button v-if="this.normalFile!=''" class="btn btn5" style="" @click="sourceDownLoad"><i class="el-icon-download"></i><br>资源下载</el-button>
              </el-row>

              <!--              <div style="font-size: 16px"><i class="el-icon-star-on"></i> 商品销量：<i style="color:#343434;">{{-->
              <!--                  info.hot-->
              <!--                }}</i></div>-->
            </div>
          </div>
        </form>
      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="商品属性" name="first">
        <el-descriptions class="margin-top" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-order"></i>
              图书规格
            </template>
            {{ info.spec }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-claim"></i>
              包装装订
            </template>
            {{ info.binding }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-check"></i>
              印张/字数
            </template>
            {{ info.sheet }}/{{ info.words }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item>
            <div v-html="info.description"></div>
          </el-descriptions-item>

        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="评论" name="second">
        <div class="recommand">
          <ul class="ul">
            <li v-for="(item,index) in recommendList" :key="index" style="
              border: 1px solid lightgray;border-radius: 10px 10px;
          ">
              <div class="comment-list">
                <el-image
                    class="imgTou"
                    style="width: 55px; height: 55px;border-radius: 50px"
                    :src="item.user.headImg"></el-image>
                <br>
                <span class="ueserName">&nbsp;&nbsp;&nbsp;<i class="el-icon-user-solid" style="color: gray"></i> 用户昵称：{{ item.user.nickName }}</span><br>
                <span class="day">{{ Math.floor(((new Date()- new Date(item.createdTime))/1000/60/60/24))==0?'刚刚':Math.floor(((new Date()- new Date(item.createdTime))/1000/60/60/24))+'天前'}}评价</span>
              </div>
              <div>
                <ul >
                  <li >
                    <i class="el-icon-chat-line-square a"></i> <span style="font:400 18px 微软雅黑">用户评论：</span><span class="a c">{{
                      item.content
                    }}</span>
                  </li>
                  <li>
                    <span class="b"><i class="el-icon-magic-stick b"></i> 评论星级：</span>
                    <el-rate
                        v-model="item.star"
                        disabled
                        show-text
                        text-color="#ff9900">
                    </el-rate>
                  </li>
                </ul>
<!--                <p><i class="el-icon-timer"></i>评论时间：<span style="color: lightskyblue;">{{ item.createdTime }}</span>-->

              </div>
            </li>
          </ul>
          <div class="block" style="float: right;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="currentChange"
                :current-page.sync="recommendQuery.pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="recommendQuery.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import {formatFileSize} from '@/utils'

const defaultQueryCart = {
  bid: null,
  name: '',
  count: 1
}
const defaultBook = {
  name: '',
  count: 999,
  isbn: '',
  price: 0,
  spec: '',
  binding: '',  //装订
  sort: 0,
  sheet: '', //印张 开本
  words: 0, //字数 单位 千
  edition: '', //版次
  description: '' //书籍描述
  , cateIds: []
  , state: 1
  , author: ''  //作者
  , subjectId: 0
  , categoryId: 0
  , hot: 0
  , recommend: 0
  , img: ''
  , fileList: [] //item type 0 普通文件 1 音频文件 id
}
export default {
  name: "Main",
  props: {
    curBookId: {}
  },

  data() {
    return {
      activeName: 'first',
      total: null,
      recommendQuery: {
        bid: null,
        pageNum: 1,
        pageSize: 10
      },
      url: this.baseUrl,
      recommendList: [],
      value: 3.7,

      resourceQuery: {
        id: null

      },
      // 资料下载
      type: null,
      tableData: [],
      btnStatus: true,
      normalFile:null,
      audiosFile:null,
      queryCollection: {
        bid: null
      },
      queryCart: {},
      money: 0,
      payNum: 1,
      info: {},

      dialogVisible: false,
      goodDetailImg: '',
      starVisible:true,

    }
  },
  created() {
    if (this.$route.query.dialogStatus) {
      this.ToDialog()
    }
    if (this.$route.query.fromComment){
      this.recommendQuery.bid = this.$route.query.bid
      this.activeName="second"
      this.recommendQuery.pageNum = this.$route.query.pageNum
      this.curBookId = this.$route.query.bid
    }
    this.info = Object.assign({}, defaultBook)
    this.getRequest('/p/pms/book/' + this.curBookId).then((resp) => {
      console.log(resp)
      this.normalFile = resp.data.normal
      this.audiosFile = resp.data.audios
      this.info = {...this.info, ...resp.data.book}
      var richText = this.info.description
      const regex = new RegExp('<img', 'gi');
      this.info.description = richText.replace(regex, `<img style="width: 65em;"`);
    }).then(()=>{
      // 判断是否被收藏
      this.getRequest('/cms/bookFavority/judgeIsExists/' + this.info.id).then((resp) => {
        console.log(resp)
        if (resp.data ==null) {
          this.starVisible=true
        }else {
          this.starVisible=false
        }
      })
    })

    // 评论
    // query: {query:this.recommendQuery,fromComment:true}
    // this.recommendQuery = {...this.recommendQuery, ...this.$route.query.query}
    this.recommendQuery.bid = this.curBookId

    this.getRequest('/oms/bookOrder/comment', this.recommendQuery).then((resp) => {
      this.recommendList = resp.data.list
      console.log(resp)
      this.total = resp.data.total
    })
  },
  watch: {},
  computed: {
    totalPrice() {
      return this.info.price * this.payNum
    },

  },
  methods: {
    getSize(file) {
      return formatFileSize(file.size)
    },
    isLogin() {
      let flag = false;
      if (window.sessionStorage.getItem('username'))
        flag = true
      return flag
    },
    getSrc(file) {
      if (window.sessionStorage.getItem('username')) {
        return this.url + '/download/bookFile/' + file.id
      }
      return ''
    },
    // 评论当前页数总条数改变
    handleSizeChange(val) {
      this.recommendQuery.pageSize = val * 1
      this.$router.push({path: '/purchasePage', query: this.recommendQuery})
    },
    // 评论分页
    currentChange(val) {
      this.recommendQuery.pageNum = val * 1
      this.getRequest('/oms/bookOrder/comment', this.recommendQuery).then((resp) => {
        this.recommendList = resp.data.list
        console.log(resp)
        this.total = resp.data.total
      })
    },
    toThingsDownLoad(fileId) {
      if (window.sessionStorage.getItem('username')) {
        this.getRequest('/download/bookFile/' + fileId).then((resp) => {
          console.log(resp)
        })
      } else {
        this.$message.error('请先登录。')
      }
    },
    ToDialog() {
      this.dialogVisible = true
      if (window.sessionStorage.getItem('username')) {
        this.btnStatus = false
      } else {
        // this.$message.error('未登录不允许下载。')
      }
      //资料下载
      this.resourceQuery.id = this.curBookId
      this.getRequest('/p/pms/book/fileByBid/' + this.resourceQuery.id).then((resp) => {
        this.tableData = resp.data.filter(item => item.type == 0)
      })
    },
    //下载资料框
    sourceDownLoad() {
      this.ToDialog()
    },
    //音频下载
    toMucis(){
      this.$router.push({
        path: '/audioList',
        query: {audioId: this.info.id}})
    },
    //收藏
    collection(id) {
      this.queryCollection.bid = id
      this.starVisible=false
      this.getRequest('/cms/bookFavority/judgeIsExists/' + this.queryCollection.bid).then((resp) => {
        console.log(resp)
        if (resp.data ==null) {
          this.getRequest('/cms/bookFavority/create', this.queryCollection).then((resp) => {
            if (resp.status === 200) {
              this.$message.success('收藏成功。')
            }
          })
        }
      })
    },
    //取消收藏
    cancleCollection(id){
      this.queryCollection.bid = id
      this.starVisible=true
      this.getRequest('/cms/bookFavority/judgeIsExists/' + this.queryCollection.bid).then((resp) => {
        if (resp.data === true) {
          this.getRequest('/cms/bookFavority/deleteByBid/', this.queryCollection).then((resp) => {
            if (resp.status === 200) {
              this.$message.success('取消成功。')
            }
          })
        }
      })
    },
    toPay() {
      if (window.sessionStorage.getItem('username') == null || window.sessionStorage.getItem('username') == undefined || window.sessionStorage.getItem('username') == '') {
        this.$message.info("你还未登录无法购买");
        return;
      }
      this.$router.push({
        path: '/toPayBuy', query: {
          bid: this.queryCart.bid,
          count: this.payNum,
          selected: [{
            bookId: this.info.id,
            count: this.payNum,
            book: this.info
          }]
        }
      })
    },
    addCart() {
      if (window.sessionStorage.getItem('username') == null || window.sessionStorage.getItem('username') == undefined || window.sessionStorage.getItem('username') == '') {
        this.$message.info("你还未登录无法添加购物车");
        return;
      }
      this.queryCart = Object.assign(defaultQueryCart)
      this.queryCart.bid = this.curBookId
      // this.queryCart.name = this.info.name
      const params = {
        bid: this.queryCart.bid,
        count: this.payNum
      }
      // console.log(this.queryCart)
      this.getRequest('/cms/cart/create', params).then((resp) => {
        if (resp.status == 200) {
          this.$message.success('添加成功。')
        } else {
          this.$message.error('添加失败。')
        }
      })
    },
    downloadFile() {

    },
    handleChange(value) {
      this.info.price = value * 1.0 * this.info.price
    },
    dive() {

    },
    add() {
      this.info.payNum++;
      this.price = this.payNum * 238
    }
  }
}
</script>

<style scoped>
.header{
  display: inline-block;
  margin-top: 40px;
  font:500 25px 华文黑体;
  color: #424141;
  margin-bottom: 20px;
}
::v-deep .flexslider .slides img[data-v-4e049ae4] {
  width: 380px;
  height: 400px;
  border: 2px solid #e7e6e6;
  padding: 5px;
}
/*留言*/
.recommand {
  margin-top: 20px;
}

/*书籍详情*/
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}

.box-card ul li {
  margin: 6px;
}

.deta-tou {
  overflow: hidden;
  padding-bottom: 60px;
  width: 70em;
  margin: 1em auto;
}

.deta-t-fl {
  width: 337px;
  margin-right: 38px;
}

.flexslider {
  position: relative;
}

.flexslider .slides img {
  width: 290px;
  height: 293px;
  display: block;
}

.deta-t-fr {
  width: 734px;
}

.fright {
  width: 62%;
  position: relative;
  top:16px;
  float: right;
  display: inline;
  background: white;
  height: 411px;
}

.deta-t-fr h1 {
  font-size: 24px;
  color: #000;
}

.deta-t-fr .co-l {
  color: #898989;
  margin-left: 30px;
}

.deta-t-fr .dd1 {
  overflow: hidden;
  color: #b50029;
  font-size: 14px;
  margin: 10px 0;
}

.deta-t-fr .dd2 {
  overflow: hidden;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 10px;
  margin-left: 35px;
  margin-right: 35px;
}

.d-sn {
  font-size: 14px;
  color: #b50029;
  border-right: 1px solid #cccccc;
  padding-right: 10px;
  margin-right: 10px;
}

.fleft, .uleft li {
  float: left;
  display: inline;
}

.deta-t-fr .dd3 {
  padding: 25px 0px 15px 10px;
  margin-left: 33px;
  margin-right: 33px;
  border-bottom: 1px solid #e5e5e5;
}

.dd3-div {
  overflow: hidden;
}

.deta-t-fr .co-l {
  color: #898989;
}

.deta-t-fr .co-l {
  color: #898989;
}

.c-add-div {
  width: 132px;
  height: 28px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  margin: 0 auto;
}

.c-add-div .c-add {
  width: 28px;
  height: 28px;
  background: #fafafa;
  color: #6d6d6d;
  border: none;
  cursor: pointer;
  text-align: center;
  line-height: 28px;
}

.c-add-div .c-text {
  width: 74px;
  height: 28px;
  border: none;
  border-left: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  text-align: center;
}

.deta-t-fr .dd4 {
  overflow: hidden;
}

.deta-t-fr .dd4 .d-jr-m {
  overflow: hidden;
  padding: 15px 0;
}

.car-b {
  display: block;
  width: 250px;
  height: 41px;
  background: url("http://www.jyxue.com.cn/themes/default/skin/ison24.png") no-repeat;
  float: left;
}

.car-b:after {
  clear: left;
}

.shou-c {
  display: block;
  width: 39px;
  height: 41px;
  float: left;
  background: url("http://www.jyxue.com.cn/themes/default/skin/ison25.png") left no-repeat;
  margin-left: 4px;
}

.sh-sum {
  float: left;
  font-size: 14px;
  line-height: 41px;
  margin-left: 15px;
  color: #898989;
}
.name{
  display: inline-block;
  font:500 26px 微软雅黑;
  margin-top: 30px;
  margin-left: 35px;
}
.totalC{
  margin-left: 3px;
  font-size: 15px;
}

.author{
  position: relative;
  top:-0.3px;
  font-size: 15px;
}
.contents{
  display: inline-block;
  font:400 15px "微软雅黑";
  margin-bottom: 10px;
}
.c2{
  position: relative;
  top:5px;
}
.c1{
  margin-bottom: 17px;
}
.d-jr-m{
  margin-left: 33px;
  margin-top: 7px;
  margin-right: 17px;
}
.btn {
  margin-right: 10px;
  width: 120px;
  text-align: center;
  font:500 14px 华文黑体;
  letter-spacing: 1px;
  color: #3e3d3d;
}
.btn1{
  width: 200px;
  background: #f36e6e;
  border: 1px solid #f36e6e;
  border-radius: 0;
  font-size:18px;
}

.btn1 i,.btn2 i{
  position: relative;
  top:2.5px;
  left: -10px;
  font-size:25px;
}
.btn2{
  width: 180px;
  margin-left: 20px;
  background: #f36e6e;
  border: 1px solid #f36e6e;
  border-radius: 0;
  font-size:18px;
}
.btn3,.btn4,.btn5{
  font-size: 10px;
  background:none;
  border: none;
  color: #ff6600;
  position: absolute;
  right: -26px;
  top:5px;
}
.btn3 i {
  font-size: 45px;
}
.btn4 i{
  font-size:26px;
}
.btn5 i{
  font-size:29px;
}
.btn4{
  color: #8d8a8a;
  right: -28px;
  top:1.2px;
}
.btn5{
  color: #8d8a8a;
  right:45px;
  top:-2px;
}
::v-deep .el-tabs__item.is-active{
  color: #de3939;
}
::v-deep .el-tabs__item{
  font:600 20px 华文黑体;
  height: 35px;
}
::v-deep .el-tabs__item:hover{
  color: #de3939;
}
::v-deep .el-tabs__active-bar {
  background:  #de3939;
}
.el-tabs{
  width: 106.8%;
}
.comment-list{
  padding: 0;
  margin-left: 30px;
  margin-top: 20px;
}

.ueserName{
  position: relative;
  top:-52px;
  left: 63px;
  font:500 18px 华文黑体;
}
.day{
  position: relative;
  top:-46px;
  left: 80px;
  font:400 14px 华文黑体;
  color: gray;
}
.ul li{
  margin-bottom: 20px;
  background: #faf8f8;
}
.a{
  margin-left: 50px;
  vertical-align: top;
  font:400 18px 微软雅黑;
}
.b{
  margin-left: 24px;
  font:400 18px 微软雅黑;

}
.c{
  display: inline-block;
  width: 78%;
  position: relative;
  left: -40px;
  font:400 18px 微软雅黑;
  color: #5a5959;
}
::v-deep .a[data-v-4e049ae4]{
  padding-left: 0px;
}
::v-deep .el-rate{
  position: relative;
  top:-21px;
  left:175px;
}
.el-icon-chat-line-square{
  font-size: 22px;
  position: relative;
  top:1px;
}
.el-icon-magic-stick{
  font-size: 22px;
}
::v-deep .el-rate__icon, .el-rate__item{
  font-size: 23px;
}
</style>